import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Modal,
  Form,
  Col,
  Row,
  Button,
  Alert
} from 'react-bootstrap';
import $ from 'jquery';

import './less/addmember.css';

import { function_addMemberByProject } from '../../actions/member';

class AddMember extends Component {

  state = {
    emailError: false,
    nickError: false,
    roleError: false,
    errorMsg: ""
  };

  handleSubmit () {
    let email = $(this.refs.email).val();
    let regPrex = /^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if (!regPrex.test(email)) {
      this.setState({
        emailError: true,
        errorMsg: "邮箱格式不正确"
      });
      return;
    }

    if (email === "") {
      this.setState({
        emailError: true,
        errorMsg: "昵称不能为空"
      });
      return;
    }

    let nickname = $(this.refs.nick).val();

    if (nickname.length < 2) {
      this.setState({
        nickError: true,
        errorMsg: "昵称长度不能少于2字符"
      });
      return;
    }

    regPrex = /^[\u4e00-\u9fa5a-zA-Z]+[\u4e00-\u9fa5a-zA-Z0-9\-_]*$/
    if (!regPrex.test(nickname)) {
      this.setState({
        nickError: true,
        errorMsg: "昵称请输入中英文、下划线、英文句号和数字，且只能以中英文开头"
      });
      return;
    }

    if (nickname === "") {
      this.setState({
        nickError: true,
        errorMsg: "昵称不能为空"
      });
      return;
    }

    var roleArr = [];
    $("input[name='role']:checked").each(function (index, item) {
      roleArr.push(parseInt($(this).val()));
    });
    if (roleArr.length < 1 || roleArr.length > 4) {
      this.setState({
        roleError: true,
        errorMsg: "成员在项目中至少得有一个角色"
      });
      return;
    }

    function_addMemberByProject(this.props.pid, email, nickname, roleArr, this.props.dispatch, result => {
      this.props.onSubmit(result);
    });

    this.setState({
      emailError: false,
      nickError: false,
      roleError: false,
      errorMsg: ""
    });
  }

  render () {
    return (
      <Modal className="addMemberBox" show={this.props.show} onHide={this.props.onHide} animation={true}>
        <Modal.Header closeButton>
          <Modal.Title>邮件邀请</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.state.emailError || this.state.nickError || this.state.roleError ?
            <Alert variant="danger" onClose={() => this.setState({
              emailError: false,
              nickError: false,
              roleError: false
            })} dismissible>
              <Alert.Heading>{this.state.errorMsg}</Alert.Heading>
            </Alert>
            : null}
          <Form>
            <Form.Group as={Row} className={this.state.emailError ? "error" : null}>
              <Form.Label column sm="2">
                邮箱
            </Form.Label>
              <Col sm="10">
                <Form.Control ref="email" type="email" placeholder="请输入他的邮箱" />
              </Col>
            </Form.Group>

            <Form.Group as={Row} className={this.state.nickError ? "error" : null}>
              <Form.Label column sm="2">
                企业昵称
            </Form.Label>
              <Col sm="10">
                <Form.Control ref="nick" type="text" placeholder="请输入他在企业的昵称" />
              </Col>
            </Form.Group>

            <Form.Group as={Row}>
              <Form.Label column sm="2">
                角色
            </Form.Label>
              <Col sm="10" className="roles">
                <Form.Check inline label="开发人员" value="3" name="role" type="checkbox" defaultChecked={this.props.role === "developer" ? true : false} />
                <Form.Check inline label="测试人员" value="4" name="role" type="checkbox" defaultChecked={this.props.role === "tester" ? true : false} />
                <Form.Check inline label="上线人员" value="2" name="role" type="checkbox" defaultChecked={this.props.role === "admin" ? true : false} />
              </Col>
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={this.props.onHide}>
            取消
        </Button>
          <Button variant="primary" onClick={this.handleSubmit.bind(this)}>
            发送邀请
        </Button>
        </Modal.Footer>
      </Modal>
    )
  }
}

function mapStateToProps (state) {
  return {
  }
}

export default connect(mapStateToProps)(AddMember);